
import React, { Component } from "react";
import { Descriptions, Table, Button, Divider, Tag, Rate, Switch, Select, Modal, message, Popconfirm,
    Form, Input, InputNumber, Image } from 'antd';
import { CaretUpOutlined, CaretDownOutlined, PaperClipOutlined, SearchOutlined, RedoOutlined, CaretRightOutlined } from '@ant-design/icons';
import Breadcrumbs from "../../components/component/Breadcrumb/breadcrumb";
import styles from './account.module.css';
const { TextArea } = Input;

const xian = ['雁塔区', '莲湖区', '新城区', '未央区', '长安区', '灞桥区', '高陵区', '临潼区', '沣东新城', '沣西新城', '秦汉新城', '泾河新城', '空港新城']
export default class extends Component {
  constructor() {
    super();
    this.state = {
      hasSelected:true,
      data:[],
      selectedRowKeys: [],
      loading: true,
      visible:false,
      titles:{},
      editVisible:false,
      row:{},
      area:'',
      cityName:'',
    };
  }

  componentDidMount() {
      this.getDatas();
      window.scrollTo(0, 0);
  }

  confirms = () => {
    message.success('数据下发成功!请去数据中心查看!');
    this.start();
  };
  
  cancels = () => {
    message.error('下发数据取消！');
  };

  edit = (item) =>{
    this.setState({editVisible:true,row:item});
  }

  start = () => {
    this.setState({ loading: true,data: [], area:'',cityName:'' },()=>{
      this.getDatas();
    });
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false,
      });
      
    }, 1000);
  };

  getDatas = ()=>{
    let datas= [];
    for (let i = 0; i < 13; i++) {
      datas.push({
        key: i,
        name: `西安市${xian[i]}`,
        age: Math.floor(Math.random() * 20),
        address: `西安市-${xian[i]}第${i*i}号`,
        tags: i,
        gdp: Math.floor(Math.random() * 10),
        live: Math.floor(Math.random() * 19.6)+'亿元',
        gdpNum: Math.floor(Math.random() * 13),
        upRate: Math.floor(Math.random() * 9),
        rate: Math.floor(Math.random() * 50)+'%',
        peopleRate: Math.floor(Math.random() * 15)+'%',
        status:Math.floor(Math.random() * 1000),
        people: Math.floor(Math.random() * 100)+'万人',
      });
    }
    this.setState({data:datas})
  }

  filterData = () =>{
    let das = this.state.data;
    if(this.state.area!= ''){
        let arr = das.filter(item => item.age == this.state.area);
        this.setState({data:arr});
    }
    if(this.state.cityName!= ''){
      let arr = das.filter(item => item.name == this.state.cityName);
      this.setState({data:arr});
    }

  }

  areaChange = (e) => {
    this.setState({area:e.target.value})
  }

  nameChange = (e) => {
    this.setState({cityName:e.target.value})
  }

  showModal = (item) => {
      this.setState({
        visible: true,
        titles:item
      });
  };

  hideModal = () => {
    this.setState({
      visible: false,
    });
  };

  onShowSizeChange = (current, pageSize) => {
    console.log(current, pageSize);
    this.setState({current:current,pageSize:pageSize})
  };

  onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  handleOk = () =>{
      this.setState({editVisible:false},()=>{
        message.success('完成数据更改!');
        this.start();
      })
  }

  handleCancel = () =>{
    debugger
    this.setState({editVisible:false});
  }

  onFinish = (values) => {
    console.log('Success:', values);
    message.success(values.type+'成功!',()=>{
      this.props.history.push('/dashboard/infoManage');
    });
    
  };

  render() {
    const { loading, selectedRowKeys, hasSelected, data, visible, titles, editVisible, row, area, cityName } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <>
        <div style={{marginLeft:0}}>
          <Breadcrumbs props={this.props}></Breadcrumbs>
        </div>
        <Divider />
        <div>
          <Form
            loading={loading}
            name="basic"
            style={{width:500,margin:'0 auto'}}
            labelCol={{
              span: 4,
            }}
            wrapperCol={{
              span: 20,
            }}
            initialValues={{
              username: 'lijiangxin',
              password:"123456",
              passwordNew:"",
              type:"更新密码",
            }}
            onFinish={this.onFinish}
            autoComplete="off"
          >
            <Form.Item
              label="账号"
              name="username"
              rules={[
                {
                  required: true,
                  message: '输入账号!',
                },
              ]}
            >
              <Input disabled />
            </Form.Item>
            <Form.Item
              label="原密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: '输入原密码!',
                },
              ]}
            >
              <Input.Password />
            </Form.Item>
            <Form.Item
              label="新密码"
              name="passwordNew"
              rules={[
                {
                  required: true,
                  message: '输入新密码!',
                },
              ]}
            >
              <Input.Password />
            </Form.Item>            
            <Form.Item
              label="设置类型"
              name="type"
              rules={[
                {
                  required: true,
                  message: 'Please input your password!',
                },
              ]}
            >
              <Select
                defaultValue="更新密码"
                options={[
                  {
                    value: '更新密码',
                    label: '更新密码',
                  },
                  {
                    value: '重置密码',
                    label: '重置密码',
                  },
                  {
                    value: '申请锁定',
                    label: '申请锁定',
                  }
                ]}
              />
            </Form.Item>    
            <Divider />
            <Form.Item style={{textAlign:'center'}}>
              <Button>取消</Button>
              <Button style={{marginLeft:30}} type="primary" htmlType="submit" >确认</Button>
            </Form.Item>
          </Form>
          
          {/* <div style={{textAlign:'center'}}>
            <Button>取消</Button>
            <Button style={{marginLeft:30}} type="primary" onClick={this.onFinish} >确认</Button>
          </div> */}
        </div>
      </>
    )
    }
}
